<template>
  <!-- crud table docs https://www.npmjs.com/package/el-crud-table -->
  <crud-table ref="crudTableRef">
    <crud-table-header :inline="false">
      <crud-table-search>
        <el-form-item prop="personId">
          <dynamic-selector requestUrl="/personGetAll" labelKey="name" valueKey="id" placeholder="人员" clearable />
        </el-form-item>
        <el-form-item prop="gender">
          <dynamic-selector requestUrl="/getListByKey" dictKey="gender" placeholder="性别" clearable />
        </el-form-item>
        <el-form-item prop="area">
          <dynamic-cascader requestUrl="/cascader" isFormat valueKey="areaCode" placeholder="地区" clearable />
        </el-form-item>
        <el-form-item prop="name">
          <el-input requestUrl="cascader" placeholder="姓名" clearable />
        </el-form-item>
      </crud-table-search>

      <crud-table-action>
        <crud-table-btn-add url="/add" />
      </crud-table-action>
    </crud-table-header>

    <crud-table-pagination>
      <crud-table-data url="/list">
        <el-table-column prop="id" label="ID" align="center" />
        <el-table-column prop="name" label="名称" align="center" />

        <crud-table-handler>
          <crud-table-btn-preview text="查看" />
          <crud-table-btn-edit url="/edit" />
          <crud-table-btn-del url="/del" />
        </crud-table-handler>
      </crud-table-data>
    </crud-table-pagination>

    <crud-table-dialog>
      <el-form-item label="名称" prop="name">
        <el-input />
      </el-form-item>
    </crud-table-dialog>
  </crud-table>
</template>

<script setup></script>

<style lang="scss" scoped></style>
